<!--3D地球-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'Earth3DChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          pn_chart_type: 'echarts-gl', // 此变量标识此组件是一个3D组件，不可删除
          title: PnDesigner.buildTitleConfigData(),
          visualMap: [
            {
              min: 0,
              max: 1000,
              minSymbolSize: 1,
              maxSymbolSize: 20
            }
          ],

          globe: {
            baseTexture: 'baseTexture.jpg',
            displacementScale: 0,
            viewControl: {
              autoRotate: true, // 自转
              autoRotateDirection: 'cw', // 自转方向，cw：顺时针，ccw：逆时针
              autoRotateSpeed: 15, // 自转速度
              distance: 180, // 默认视角距离主体的距离
              alpha: 0, // 上下旋转
              beta: 90, // 左右旋转
            },
            light: {
              color: '#42a5f5'
            },
          },

          lines3D: {
            effect: {
              constantSpeed: 100
            },
            lineStyle: {
              color: 'rgb(50, 50, 150)',
              width: 0.5,
              opacity: 0.9
            }
          },

          scatter3D: {
            itemStyle: {
              color: '#ffeb3b',
              opacity: 1
            }
          }

        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {field: 'series', remark: '系列类型，只能有两类型：lines3D、scatter3D'},
          {field: 'from', remark: '起始坐标，lines3D系列特有，定义飞线图的起始坐标'},
          {field: 'to', remark: '终点坐标，lines3D系列特有，定义飞线图的终点坐标'},
          {field: 'coord', remark: '坐标，scatter3D系列特有，定义散点的坐标'},
          {field: 'value', remark: '散点值，scatter3D系列特有，定义散点的数值'}
        ],
        ds_resultObj: [

          {
            "series": 'lines3D',
            "from": "4.21875,21.943046",
            "to": "113.911722,30.748697"
          },
          {
            "series": 'lines3D',
            "from": "94.220067,39.910476",
            "to": "112.857638,35.173107"
          },
          {
            "series": 'lines3D',
            "from": "117.428724,41.246858",
            "to": "117.427149,26.428056"
          },
          {
            "series": 'lines3D',
            "from": "135.005796,35.746795",
            "to": "114.966156,31.351459"
          },
          {
            "series": 'lines3D',
            "from": "128.678669,47.042308",
            "to": "114.614653,33.13559"
          },
          {
            "series": 'lines3D',
            "from": "37.265625,3.162456",
            "to": "114.614395,30.142406"
          },
          {
            "series": 'lines3D',
            "from": "72.421875,45.828799",
            "to": "100.899788,34.014409"
          },
          {
            "series": 'lines3D',
            "from": "-98.789063,38.548165",
            "to": "115.669547,34.01474"
          },
          {
            "series": 'lines3D',
            "from": "-103.359375,54.572062",
            "to": "0.703125,47.517201"
          },
          {
            "series": 'lines3D',
            "from": "-98.4375,40.979898",
            "to": "-3.164063,53.956086"
          },
          {
            "series": 'lines3D',
            "from": "138.164063,-23.563987",
            "to": "114.61447,31.050538"
          },
          {
            "series": 'lines3D',
            "from": "172.96875,-41.244772",
            "to": "114.263374,32.247835"
          },
          {
            "series": 'lines3D',
            "from": "-53.789062,-10.833306",
            "to": "8.4375,48.224673"
          },
          {
            "series": 'lines3D',
            "from": "-98.789063,34.307144",
            "to": "-78.75,40.178873"
          },
          {
            "series": 'lines3D',
            "from": "-2.460938,52.696361",
            "to": "10.546875,51.179343"
          },
          {
            "series": 'lines3D',
            "from": "-2.8125,51.618017",
            "to": "9.492188,56.944974"
          },
          {
            "series": 'lines3D',
            "from": "-2.8125,52.295042",
            "to": "4.614258,50.317408"
          },
          {
            "series": 'lines3D',
            "from": "31.728516,49.325122",
            "to": "9.228516,50.007739"
          },
          {
            "series": 'lines3D',
            "from": "8.4375,52.48278",
            "to": "27.861328,53.592505"
          },
          {
            "series": 'lines3D',
            "from": "2.373047,47.517201",
            "to": "16.699219,51.99841"
          },
          {
            "series": 'lines3D',
            "from": "-1.933594,54.213861",
            "to": "7.998047,61.396719"
          },
          {
            "series": 'lines3D',
            "from": "-3.691406,53.067627",
            "to": "24.345703,45.644768"
          },
          {
            "series": 'lines3D',
            "from": "34.365234,38.479395",
            "to": "31.113281,48.283193"
          },
          {
            "series": 'lines3D',
            "from": "5.888672,25.403585",
            "to": "-2.373047,53.120405"
          },
          {
            "series": 'lines3D',
            "from": "111.143157,27.87475",
            "to": "113.604343,31.351364"
          },
          {
            "series": 'lines3D',
            "from": "106.966954,30.028304",
            "to": "112.901264,32.359052"
          },
          {
            "series": 'lines3D',
            "from": "103.80105,30.710901",
            "to": "118.657426,32.173421"
          },
          {
            "series": 'lines3D',
            "from": "113.120736,23.238885",
            "to": "118.613397,31.912678"
          },
          {
            "series": 'lines3D',
            "from": "125.821558,43.646413",
            "to": "116.24142,40.146522"
          },
          {
            "series": 'lines3D',
            "from": "106.088566,38.44561",
            "to": "115.537684,33.20931"
          },
          {
            "series": 'lines3D',
            "from": "102.966443,47.814649",
            "to": "114.703463,40.213595"
          },
          {
            "series": 'lines3D',
            "from": "121.447483,31.2767",
            "to": "115.845211,33.576391"
          },
          {
            "series": 'lines3D',
            "from": "120.151197,30.199794",
            "to": "112.615591,32.895878"
          },
          {
            "series": 'lines3D',
            "from": "118.021076,36.474531",
            "to": "113.363248,33.025356"
          },
          {
            "series": 'lines3D',
            "from": "116.02168,38.874786",
            "to": "113.473277,35.281153"
          },
          {
            "series": 'lines3D',
            "from": "115.252886,39.860346",
            "to": "113.363282,33.356551"
          },
          {
            "series": 'lines3D',
            "from": "-98.4375,37.788081",
            "to": "-59.238281,-5.528511"
          },
          {
            "series": 'lines3D',
            "from": "-98.789063,40.178873",
            "to": "-5.449219,41.112469"
          },
          {
            "series": 'lines3D',
            "from": "36.386719,38.68551",
            "to": "8.4375,47.040182"
          },
          {
            "series": 'lines3D',
            "from": "-4.042969,54.673831",
            "to": "78.224683,23.076793"
          },
          {
            "series": 'lines3D',
            "from": "-3.515625,53.540307",
            "to": "53.4375,30.902225"
          },
          {
            "series": 'lines3D',
            "from": "-2.636719,53.330873",
            "to": "44.121094,41.508577"
          },
          {
            "series": 'lines3D',
            "from": "-3.164063,53.956086",
            "to": "17.226563,65.07213"
          },
          {
            "series": 'lines3D',
            "from": "-3.691406,53.540307",
            "to": "23.027344,55.478853"
          },
          {
            "series": 'lines3D',
            "from": "-2.460938,53.540307",
            "to": "2.460938,47.040182"
          },
          {
            "series": 'lines3D',
            "from": "110.571477,33.429615",
            "to": "104.064487,16.297335"
          },
          {
            "series": 'lines3D',
            "from": "114.790616,33.135752",
            "to": "113.203125,2.284551"
          },
          {
            "series": 'lines3D',
            "from": "113.911842,32.098883",
            "to": "107.230151,14.262687"
          },
          {
            "series": 'lines3D',
            "from": "126.392316,39.911362",
            "to": "115.669533,33.868882"
          },
          {
            "series": 'lines3D',
            "from": "127.798204,36.739373",
            "to": "113.560734,34.160283"
          },
          {
            "series": 'lines3D',
            "from": "127.97381,36.031478",
            "to": "140.097656,39.639538"
          },
          {
            "series": 'lines3D',
            "from": "113.209195,31.950102",
            "to": "248.203125,37.160317"
          },
          {
            "series": 'lines3D',
            "from": "108.988955,31.351432",
            "to": "243.984375,49.382373"
          },
          {
            "series": 'lines3D',
            "from": "112.505952,33.135737",
            "to": "294.609375,-11.867351"
          },

          {"series": 'scatter3D', "coord": "112.505952,33.135737", "value": "900"},
          {"series": 'scatter3D', "coord": "-106.523438,62.103883", "value": "450"},
          {"series": 'scatter3D', "coord": "114.438471,22.103386", "value": "232"},
          {"series": 'scatter3D', "coord": "109.603594,19.060209", "value": "549"},
          {"series": 'scatter3D', "coord": "110.043794,26.427911", "value": "120"},
          {"series": 'scatter3D', "coord": "118.656972,26.66359", "value": "657"},
          {"series": 'scatter3D', "coord": "119.448469,28.841794", "value": "90"},
          {"series": 'scatter3D', "coord": "113.472703,29.456165", "value": "574"}

        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption())
    },
    data() {
      return {
        btImages: null
      }
    },
    mounted() {
      this.init();

    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          visualMap: [
            {
              show: false,
              seriesIndex: 1,
              min: this.component.compConfigData.chartOption.visualMap[0].min,
              max: this.component.compConfigData.chartOption.visualMap[0].max,
              inRange: {
                symbolSize: [
                  this.component.compConfigData.chartOption.visualMap[0].minSymbolSize,
                  this.component.compConfigData.chartOption.visualMap[0].maxSymbolSize
                ]
              }
            }
          ],
          globe: {
            baseTexture: require('./images/' + this.component.compConfigData.chartOption.globe.baseTexture),
            heightTexture: require('./images/heightTexture.jpg'),
            displacementScale: this.component.compConfigData.chartOption.globe.displacementScale,// 凹凸度
            displacementQuality: 'high',
            globeRadius: 100,
            globeOuterRadius: 102,
            shading: 'lambert',
            light: {
              ambient: {
                color: this.component.compConfigData.chartOption.globe.light.color,
                intensity: 1
              },
              main: {
                color: this.component.compConfigData.chartOption.globe.light.color,
                intensity: 1
              }
            },
            viewControl: {
              autoRotate: this.component.compConfigData.chartOption.globe.viewControl.autoRotate, // 自转
              autoRotateDirection: this.component.compConfigData.chartOption.globe.viewControl.autoRotateDirection, // 自转方向，cw：顺时针，ccw：逆时针
              autoRotateSpeed: this.component.compConfigData.chartOption.globe.viewControl.autoRotateSpeed, // 自转速度
              distance: this.component.compConfigData.chartOption.globe.viewControl.distance, // 默认视角距离主体的距离
              alpha: this.component.compConfigData.chartOption.globe.viewControl.alpha, // 上下旋转
              beta: this.component.compConfigData.chartOption.globe.viewControl.beta, // 左右旋转
            }
          },
          series: [
            {
              type: 'lines3D',
              coordinateSystem: 'globe',
              blendMode: 'lighter',
              effect: {
                show: this.$store.state.release.pageMetadata ? true : false,
                trailWidth: 1.5,
                trailOpacity: 0.5,
                trailLength: 0.2,
                constantSpeed: 100
              },
              lineStyle: {
                width: this.component.compConfigData.chartOption.lines3D.lineStyle.width,
                color: this.component.compConfigData.chartOption.lines3D.lineStyle.color,
                opacity: this.component.compConfigData.chartOption.lines3D.lineStyle.opacity
              },
              data: []
            },
            {
              type: 'scatter3D',
              coordinateSystem: 'globe',
              blendMode: 'lighter',
              itemStyle: {
                color: this.component.compConfigData.chartOption.scatter3D.itemStyle.color,
                opacity: this.component.compConfigData.chartOption.scatter3D.itemStyle.opacity
              },
              /*data: [
                {
                  value: [112.505952, 33.135737, 900]
                }
              ]*/
              data: []
            }
          ]
        };

        let groupItem = this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series');
        if (groupItem) {
          groupItem.forEach(item => {

            if (item.type == 'lines3D') {
              item.list.forEach(l => {
                let fromArr = l.from.split(',');
                let toArr = l.to.split(',');
                option.series[0].data.push([
                  [fromArr[0].trim(), fromArr[1].trim()],
                  [toArr[0].trim(), toArr[1].trim()],
                ])
              })
            }
            if (item.type == 'scatter3D') {
              item.list.forEach(l => {
                let coordArr = l.coord.split(',');
                option.series[1].data.push({
                  value: [coordArr[0].trim(), coordArr[1].trim(), l.value]
                })
              })
            }
          })
        }

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
